<template>
    <div>
        <div class="bt_contain">
             <p class="bt_title">联系我们</p>
             <div class="message_content">
                 <el-row :gutter="10">
                     <el-col :span="12">
                         <p class="advise_title">意见留言</p>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="姓名：" prop="name">
                                <el-input v-model="form.name" type="text"></el-input>
                            </el-form-item>
                             <el-form-item label="手机号：" prop="phone">
                                <el-input v-model="form.phone" type="number"></el-input>
                            </el-form-item>
                            <el-form-item prop="email" label="邮箱：">
                                <el-input v-model="form.email" type="email"></el-input>
                            </el-form-item>
                             <el-form-item label="留言：" prop="content">
                                <el-input type="textarea" v-model="form.content"></el-input>
                            </el-form-item>
                             <el-form-item>
                                <el-button type="success" class="submit_btn" @click="onSubmit">提交</el-button>
                             </el-form-item>
                        </el-form>
                     </el-col>
                     <el-col :span="4">
                         <div class="connact_pic">
                             <h3>联系我们</h3>
                             <p><i class="el-icon-phone"></i>15016977968</p>
                             <p><i class="el-icon-chat-dot-round"></i>15016977968</p>
                         </div>
                     </el-col>
                 </el-row>
             </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                name:'',
                phone:'',
                content:'',
                email:""
            },

        }
    },
    methods:{
        async onSubmit(){
            const res = await this.http.post('/customer/add',this.form)
            console.log(res);

            if(status.Code !== 200){
              this.$message({message:'提交失败',type:'warning'})
            }
                this.$message({message:'提交成功',type:'success'})
            
        }
    }
}
</script>

<style scoped>
.bt_contain{
    width: 100%;
    height: 600px;
    /* background: pink; */
    margin: 0;
    text-align: center;
}
.bt_title{
   margin: 0;
   position: relative;
   top: 30px;
   padding: 0 20px;
   font-size: 18px;
   font-weight: 400px;
   display: inline-block;
   border-left:5px solid rgba(5, 160, 69, 1);
}
.message_content{
        width:800px;
        height: 400px;
        /* background: pink; */
        border: 2px solid #333;
        margin: 0 auto;
        position: relative;
        top:50px;
}
.advise_title{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
}
.connact_pic{
    width:335px;
    height: 400px;
    background: #05a045;
    z-index: 10000;
    margin-left: 60px;
    display: block;
}
.connact_pic h3,p{
  margin: 0;
}
.connact_pic h3{
    position: relative;
    top: 50px;
    color: #fff;
    font-size: 24px;
}
.connact_pic p{
    position: relative;
    top: 70px;
    color: #fff;
    letter-spacing: 2px;
    margin-top: 20px;
}
.submit_btn{
    position: relative;
    left: 0;
    top: 10px;
    border-radius: 0;
    padding: 12px 30px;
}
</style>